<template>
  <div class="exploration-page">
    <header>
        <div class="exploration-page__header">现场勘探</div>
    </header>
    <el-container class="exploration-details">
      <ul>
        <li class="exploration-details__base" v-for="(items,indexs) in nav_name">
          <div></div>
          <ul>
            <li class="exploration-details__li" v-for="(item,index) in nav_name">
              <span> {{navName.navNames[index]}}： </span>
              <span> {{item.valkey}} </span>
            </li>
          </ul>
          <ul class="exploration-details__ul">
            <li class="exploration-details__nav" v-for="(item,index) in navArr">
                <div class="exploration-details__view">
                  <img src="" alt="">
                  <em>{{item.counters}}</em>
                </div>
                <p class="exploration-details__nav__name">{{navName.navNameIcon[index]}}</p>
            </li>
          </ul>
        </li>
      </ul>
    </el-container>
  </div>
</template>

<style type="text/scss" lang="scss" scoped>
  @import "../style/vars";
  * {
    font-size: .16rem;
  }
  ul,li {
      list-style-type: none;
      margin:0;
      padding:0;
    }

    .exploration-page {
      background-color:white;
      height:100%;
      overflow:hidden;
      width:100%;
      // min-height:700px;

      &__header {
        background-color:#efefef;
        height:0.44rem;
        line-height:0.44rem;
        padding-left:0.28rem;
      }
      .exploration-details {
        background-color:white;
        height:100%;
        width:100%;

        &__li {
          height:0.28rem;
          line-height:0.28rem;
          span {
            display:block;
            float:left;
          }
          span:nth-child(1) {
            color:#ccc;
            text-align:right;
            width:0.9rem;
          }
        }
        &__base>div{
          background-color:#ccc;
          height:1px;
          margin:0 auto 0.14rem auto;
          width:90%;
        }
        &__base:nth-child(1)>div{
          background-color:white;
          margin-bottom: 0;
          margin-top: 0.14rem;
        }
        &__ul {
          display:-webkit-box;
          margin-top: 0.28rem;
        }
        &__nav {
          -webkit-box-flex:1;
          -webkit-flex:1;
          flex:1;
          width:100%;
          &__name{
            color:#ccc;
            display:block;
            height:0.28rem;
            line-height:0.28rem;
            text-align:center;
            width:100%;
          }
        }
          &__view {
            background-color:yellow;
            height:0.44rem;width:0.44rem;border-radius:0.07rem;
            margin:0 auto;
            position: relative;
            em {
                background-color: #f45052;
                border-radius: 50%;
                color: white;
                display: block;
                height: 0.22rem;
                line-height: 0.22rem;
                position: absolute;
                right: -0.11rem;
                text-align: center;
                top: -0.11rem;
                width: 0.22rem;
            }
          }
      }
    }
</style>
<script>
    export default {
      name: 'exploration',
      data() {
        return {
          nav_name: [
            {valkey: '21231212312'},
            {valkey: 'xxxx小区'},
            {valkey: 'xxxx区xxxx街道xxxx小区'},
            {valkey: '2018-3-23'},
            {valkey: '陈芳芳'}],
          navArr: [
            {picUrl: '123123', counters: '12'},
            {picUrl: '123123', counters: '12'},
            {picUrl: '123123', counters: '12'},
            {picUrl: '123123', counters: '12'},
            {picUrl: '123123', counters: '12'},
            {picUrl: '123123', counters: '12'}
          ],
          navName: {
            navNames: ['现勘编号', '现场编号', '勘验地址', '接勘时间', '勘验人'],
            navNameIcon: ['勘察', '指纹', '足迹', 'DNA', '尸检', '基站']
          }
        }
      }
    }
</script>
